<!-- 三维模型 -->
<template>
  <div
    class="school-lab__container"
    :id="id"
  ></div>
</template>

<script>
import * as THREE from "three";
import Detector from "./GisMap/Detector";
import SchoolLab from "./GisMap/SchoolLab";
export default {
  name: "GisMap",
  data() {
    return {
      // 命名空间,用于规避vue自动添加得getter，setter，提高性能。
      namespace: {}
    };
  },
  props: {
    // 容器id
    id: {
      type: String,
      default: "school-lab__container"
    },
    // 是否为开发模式
    debugger: {
      type: Boolean,
      default: false
    },
    // 气泡数据
    data: {
      type: Array,
      default: () => [] 
    },
    // 元素样式配置
    styles: {
      type: Object
    },
    // 元素配置
    config: {
      type: Object
    },
    // 楼层点击选中时执行回调
    storeyChooseCb: {
      type: Function
    },
    // 楼层未选中时执行回调
    storeyUnChooseCb: {
      type: Function
    },
    // 气泡点击事件回调
    popupClickCb: {
      type: Function
    }
  },
  watch: {
    // 深度监听气泡数据更新，加量控制气泡展示。
    data: {
      handler(val) {
        this.updateData(val)
      },
      immediate: true,
      deep: true
    }
  },
  components: {},
  computed: {},
  created() {
    // 初始化项目内部的three库到全局
    window.THREE = window.THREE || THREE;
    // 检查当前运行环境是否支持webgl
    !Detector.webgl && Detector.addGetWebGLMessage();
  },
  mounted() {
    // 初始化三维组件
    this.initSchoolLab();
  },
  methods: {
    initSchoolLab() {
      // 初始化三维组件
      this.namespace.schoolLab = new SchoolLab({
        // 是否为调试模式
        debugger: this.debugger,
        // 默认场景中心坐标经纬度
        center: [121.41935804033824, 31.145222708124425],
        // canvas容器id
        containerId: this.id,
        // 样式配置
        style: this.styles,
        // 基础配置
        config: this.config,
        // 楼层选中回调函数
        storeyChooseCb: this.storeyChooseCb,
        // 楼层取消选中回调函数
        storeyUnChooseCb: this.storeyUnChooseCb,
        // 气泡点击事件回调函数
        popupClickCb: this.popupClickCb
      });
    },

    // 更新气泡数据
    updateData(data) {
      this.namespace.schoolLab && this.namespace.schoolLab.updateData(data)
    },

    // 镜头跳转
    flyTo(options) {
      this.namespace.schoolLab && this.namespace.schoolLab.flyTo(options)
    },

    // 切换场景的自动旋转
    toggleRotate() {
      this.namespace.schoolLab && this.namespace.schoolLab.toggleRotate()
    },

    // 设置当前楼的所有楼层数据
    setFloorsData(data) {
      this.namespace.schoolLab && this.namespace.schoolLab.setFloorsData(data)
    },

    // 筛选气泡显示
    filter(ids) {
      this.namespace.schoolLab && this.namespace.schoolLab.filter(ids)
    },

    // 清除删选
    filterReset() {
      this.namespace.schoolLab && this.namespace.schoolLab.filterReset()
    },

    // 三维组件销毁资源回收,防止多次加载导致内存泄漏
    destroy() {
      this.namespace.schoolLab.destroy()
    }
  },
  beforeDestroy() {
    this.namespace.schoolLab.destroy()
  }
};
</script>
<style lang="less">
.school-lab__container {
  width: 100%;
  height: 100%;
  background: lightblue;
}
.school-lab__marker {
  width: 250px;
  height: 160px;
  position: absolute;
  left: 110%;
  top: 120%;
  &.normal {
    background: url('~@/assets/images/popup_normal.png')center center no-repeat;
    background-size: cover!important;
    .school-lab__marker-title {
      color: #61A8C1;
      // border: solid 2px #61A8C1;
    }
    .school-lab__marker-detail {
      color: #61A8C1;
    }
    .school-lab__marker-icon-lab {
      background: url('~@/assets/images/viewIcon/icon_sy_qp_sys.png') center center no-repeat;
      background-size: 280%!important;
    }
    .school-lab__marker-icon-chemical {
      background: url('~@/assets/images/viewIcon/icon_sy_qp_hxp.png') center center no-repeat;
      background-size: 280%!important;
    }
    .school-lab__marker-icon-gas {
      background: url('~@/assets/images/viewIcon/icon_sy_qp_qtgp.png') center center no-repeat;
      background-size: 280%!important;
    }
  }
  &.orange {
    background: url('~@/assets/images/popup_warning.png')center center no-repeat;
    background-size: cover!important;
    .school-lab__marker-title {
      color: #F3732F;
      // border: solid 2px #F3732F;
    }
    .school-lab__marker-detail {
      color: #F3732F;
    }
    .school-lab__marker-icon-lab {
      background: url('~@/assets/images/viewIcon/icon_sy_qp_or_sys.png') center center no-repeat;
      background-size: 280%!important;
    }
    .school-lab__marker-icon-chemical {
      background: url('~@/assets/images/viewIcon/icon_sy_qp_or_hxp.png') center center no-repeat;
      background-size: 280%!important;
    }
    .school-lab__marker-icon-gas {
      background: url('~@/assets/images/viewIcon/icon_sy_qp_or_qtgp.png') center center no-repeat;
      background-size: 280%!important;
    }
  }
  &.yellow {
    background: url('~@/assets/images/popup_anomaly.png')center center no-repeat;
    background-size: cover!important;
    .school-lab__marker-title {
      color: #F6D501;
      // border: solid 2px #F6D501;
    }
    .school-lab__marker-detail {
      color: #F6D501;
    }
    .school-lab__marker-icon-lab {
      background: url('~@/assets/images/viewIcon/icon_sy_qp_ye_sys.png') center center no-repeat;
      background-size: 280%!important;
    }
    .school-lab__marker-icon-chemical {
      background: url('~@/assets/images/viewIcon/icon_sy_qp_ye_hxp.png') center center no-repeat;
      background-size: 280%!important;
    }
    .school-lab__marker-icon-gas {
      background: url('~@/assets/images/viewIcon/icon_sy_qp_ye_qtgp.png') center center no-repeat;
      background-size: 280%!important;
    }
  }
  &.red {
    background: url('~@/assets/images/popup_danger.png')center center no-repeat;
    background-size: cover!important;
    .school-lab__marker-title {
      color: #F63253;
      // border: solid 2px #F63253;
    }
    .school-lab__marker-detail {
      color: #F63253;
    }
    .school-lab__marker-icon-lab {
      background: url('~@/assets/images/viewIcon/icon_sy_qp_red_sys.png') center center no-repeat;
      background-size: 280%!important;
    }
    .school-lab__marker-icon-chemical {
      background: url('~@/assets/images/viewIcon/icon_sy_qp_red_hxp.png') center center no-repeat;
      background-size: 280%!important;
    }
    .school-lab__marker-icon-gas {
      background: url('~@/assets/images/viewIcon/icon_sy_qp_red_qtgp.png') center center no-repeat;
      background-size: 280%!important;
    }
  }
  .school-lab__marker-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 17px;
    font-weight: bolder;
    color: #ffffff;
    text-align: center;
    margin: 36px auto 0;
    border-radius: 16px;
    padding: 4px 10px;
    // border: solid 1px #ffffff;
    box-sizing: border-box;
    letter-spacing: 2.2px;
    min-width: 160px;
  }
  ul {
    position: absolute;
    bottom: 56px;
    left: 20px;
    width: 210px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    height: 20px;
    li {
      list-style: none;
      flex: 0 0 calc(33.33% - 8px);
      margin-right: 8px;
      height: 20px;
      padding-left: 8px;
      box-sizing: border-box;
      .school-lab__marker-icon {
        margin-left: 8px;
        width: 12px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
      }
      .school-lab__marker-detail {
        box-sizing: border-box;
        display: inline-block;
        vertical-align: middle;
        font-size: 13px;
        height: 20px;
        line-height: 20px;
        width: 32px;
        font-weight: bolder;
        color: #00ffff;
        text-align: center;
      }
    }
  }
}
</style>
